<template>
    <div>
        <div class="search" >
            <!-- v-model做数据双向绑定 -->
            <input v-model="keyword" class="search-input" type="text" placeholder="请输入城市名或拼音" />
        </div>
        <div class="search-content" ref="search" v-show="keyword">
            <ul>
                <li 
                    class="search-item border-topbottom" 
                    v-for="item of list" 
                    :key='item.id'
                    @click="handleCityClick(item.name)"
                >
                    {{item.name}}
                </li>
                <!-- 如果没有找到数据                              如果长度为零就显示该文字，如果不为零的话，就消失该文字 -->
                <li class="search-item border-topbottom" v-show="hasNoData">没有找到匹配数据</li>
            </ul>
        </div>
    </div>
</template>
<script>
// 使用better-scroll：实现滚动效果
import Bscroll from 'better-scroll'
import { mapMutations } from 'vuex'
export default {
    name: 'CitySearch',
    props: {
        cities: Object
    },
    data(){
        return {
            keyword: '',
            list: [],
            timer: null
        }
    },
    // vue页面最后不要放置逻辑代码，而是单独的放到一个计算属性中去
    computed: {
        hasNoData(){
            return !this.list.length
        }
    },
    methods: {
        // // 传入的是city
        // handleCityClick (city) {
        //     // alert(city)
        //     // C.dispatch（派发）
        //     // this.$store.dispatch('changeCity', city)
        //     this.$store.commit('changeCity', city)
        //     // 页面跳转
        //     this.$router.push('/')

        // }
        handleCityClick (city) {
            // alert(city)
            // C.dispatch（派发）
            // this.$store.dispatch('changeCity', city)
            // this.$store.commit('changeCity', city)
            this.changeCity(city)
            this.$router.push('/')

        },
        ...mapMutations(['changeCity'])
    },
    // 侦听器 搜索城市名称
    watch: {
       keyword(){
            if(this.timer){
            clearTimeout(this.timer)
            }
            // 判断如果keyword不存在，那就将数组list设置为空
            if(!this.keyword){
                this.list = []
                return 
            }
            this.timer = setTimeout(()=>{
                const result = []
                for(let i in this.cities){
                    this.cities[i].forEach((value)=>{
                        // 判断是否搜索到城市列表
                        if(value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1){
                            // 往result里面添加东西
                            result.push(value)
                        }
                    })
                }
                this.list = result
            }, 100)
       }
    },
    // 挂载
    mounted() {
        // 实例化Bscroll  传入的是dom或者是元素（通过ref来获取dom元素）
        this.scroll = new Bscroll(this.$refs.search)
    },
}
</script>

<style lang='stylus' scoped>
    @import '~styles/varibles.styl'
    .search
        height .72rem
        padding .1rem
        background $bgColor
        .search-input
            box-sizing border-box
            width 100%
            height .62rem
            line-height .62rem
            padding 0 .2rem
            text-align center
            border-radius .06rem
            color #666
    .search-content
        z-index 1
        overflow hidden
        position absolute
        top 1.76rem
        left 0
        right 0
        bottom 0
        background #eee
        .search-item
            line-height .62rem
            padding-left .2rem
            color #666
            background #fff

</style>


